<!DOCTYPE html>
<html lang="zh_CN" xmlns:th="http://www.thymeleaf.org"
      xmlns:layout="http://www.ultraq.net.nz/web/thymeleaf/layout">

<head>
    <title th:text="${pageTitle}"></title>
    <div data-th-replace="layout/head-top"></div>
</head>
<body class="gray-bg">
<div class="wrapper wrapper-content animated fadeInLeft">
        <div data-th-replace="common/functionDepict"></div>
        <div class="ibox-content unBorder">
            <div class="row">
                <section class="col-sm-8">
                    <div class="media">
                        <div class="media-left">
                            <img class="ad-course-item-pic lazy" style="width: 140px;min-height: auto" th:src="!${#maps.isEmpty(courseInfo['imageMap'])}? ${courseInfo['imageMap']['pcUrlMap']['large']} :''" >
                        </div>
                        <div class="media-body" style="display: table-cell">
                            <section class="m-l-sm">
                                <div class="ad-course-name-bx">
                                    <input type="hidden" id="courseId" th:value="${courseInfo['id']}">
                                    <span class="c-222 fs18" title="新媒体行业全系统课程" th:text="${courseInfo['courseName']}"></span>
                                </div>
                                <div class="m-t-sm clearfix c-999">
                                    <aside class="pull-left">
                                        <span class="fs12">原价/售价/会员价：</span>
                                        <span class="fs12" th:text="${courseInfo['orPrice']}+'/'+${courseInfo['realPrice']}+'/'+${courseInfo['memberPrice']}">0.0 / 0.0 / 0.0</span>
                                    </aside>
                                    <aside class="pull-left m-l-sm m-r-sm">
                                        <span class="fs12 c-ccc"> | </span>
                                    </aside>
                                    <aside class="pull-left">
                                        <span class="fs12">数据来源：</span>
                                        <span th:if="${dataKey}==${courseInfo['shopTenant']} or ${courseInfo['shopTenant'] == null }">自创建</span>
                                        <span th:if="${dataKey}!=${courseInfo['shopTenant']} and ${courseInfo['shopTenant'] != null } ">平台分享</span>
                                    </aside>
                                    <aside class="pull-left m-l-sm m-r-sm">
                                        <span class="fs12 c-ccc"> | </span>
                                    </aside>
                                    <aside class="pull-left">
                                        <span class="fs12">学习模式：</span>
                                        <span class="fs12" th:if="${courseInfo['studyLimit']}==0">未设置</span>
                                        <span class="fs12" th:if="${courseInfo['studyLimit']}==1">无限制</span>
                                        <span class="fs12" th:if="${courseInfo['studyLimit']}==2">顺序学习</span>
                                        <span class="fs12" th:if="${courseInfo['studyLimit']}==3">随堂练习</span>
                                    </aside>
                                </div>
                            </section>
                        </div>
                    </div>
                </section>
                <section class="col-sm-4 c-999">
                    <section class="m-t-sm text-right">
                        <span th:if="${courseInfo['contextStatus']}==1" class="label label-default">未完结</span>
                        <span th:if="${courseInfo['contextStatus']}==2" class="label label-info">已完结</span>
                        <span th:if="${courseInfo['status']}==0" class="label label-default label-default-info">未上架</span>
                        <span th:if="${courseInfo['status']}==1" class="label label-info">已上架</span>
                        <span th:if="${courseInfo['status']}==2" class="label label-danger">已下架</span>
                    </section>
                    <section class="m-t-lg clearfix">
                        <aside class="pull-right">
                            <a href="javascript:void(0);" th:attrappend="data-id=${courseInfo['id']} ,data-coursetype=${courseInfo['courseTypeKey']}" class="fs14 share-to-user">分享</a>
                        </aside>
                        <aside class="pull-right m-l-sm m-r-sm">
                            <span class="fs12 c-ccc"> | </span>
                        </aside>
                        <aside class="pull-right">
                            <a th:href="@{/admin/course/catalog/initCourseCatalog?courseId={courseId}(courseId=${courseInfo['id']})}" class="fs14">排课</a>
                        </aside>
                        <aside class="pull-right m-l-sm m-r-sm">
                            <span class="fs12 c-ccc"> | </span>
                        </aside>
                        <aside class="pull-right">
                            <a th:href="@{/admin/course/cou/initUpdate?id={id}(id=${courseInfo['id']})}" class="fs14">编辑</a>
                        </aside>
                    </section>
                </section>
            </div>
        </div>
        <div class="m-t ct-data-content">
            <div class="ibox-content unBorder">
                <!--录播课程数据-->
                <div class="tabs-container" th:if="${courseInfo['courseTypeKey']} eq 'PACKAGE' or ${courseInfo['courseTypeKey']} eq 'VIDEO' ">
                    <ul class="nav nav-tabs wNav-tabs">
                        <li class="active"><a class="fs14" data-toggle="tab" href="#tab-1" aria-expanded="true"> 学习数据</a></li>
                        <li><a class="fs14 courseListBtn" data-toggle="tab" href="#tab-2" aria-expanded="true" > 学员详情</a></li>
                    </ul>
                    <div class="tab-content">
                        <div class="tab-pane active" id="tab-1">
                            <div class="panel-body">

                                <div class="m-t">
                                    <section class="clearfix">
                                        <aside class="pull-left">
                                            <span class="fs14 c-000 vam">|</span>
                                            <span class="fs16 c-000 vam ml5">数据概况</span>
                                        </aside>
                                    </section>
                                    <section class="m-t m-l-lg m-r-lg">
                                        <div class="row in-iv-data-wrap in-iv-data-box">
                                            <div class="iv-data-item">
                                                <div class="iv-data-item-bx iv-data-item-bx-1">
                                                    <div class="text-center">
                                                        <div class="iv-data-item-attr">
                                                            <strong class="fs24" id="buyUserNum" th:text="${courseInfo['courseProfile']['buyCount']}">0</strong>
                                                        </div>
                                                        <h3>
                                                            <span class="fs14 c-ccc hand"
                                                                  data-container="body"
                                                                  data-html="true"
                                                                  data-toggle="popover"
                                                                  data-trigger="hover"
                                                                  data-placement="top"
                                                                  data-content="截止昨日，首次购买课程的用户数（包括 赠送、课程卡、批量导入开通）" data-original-title="" title="">
                                                                <i class="fa fa-exclamation-circle"></i>
                                                            </span>
                                                            <span class="fs14">总购买人数(人)</span>
                                                        </h3>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="iv-data-item">
                                                <div class="iv-data-item-bx iv-data-item-bx-1">
                                                    <div class="text-center">
                                                        <div class="iv-data-item-attr">
                                                            <strong class="fs24" id="totalStudy" >0</strong>
                                                        </div>
                                                        <h3>
                                                            <span class="fs14 c-ccc hand"
                                                                  data-container="body"
                                                                  data-html="true"
                                                                  data-toggle="popover"
                                                                  data-trigger="hover"
                                                                  data-placement="top"
                                                                  data-content="截止昨日，进行正常课程观看的人数总和，每24小时更新">
                                                                <i class="fa fa-exclamation-circle"></i>
                                                            </span>
                                                            <span class="fs14">总学习人数(人)</span>
                                                        </h3>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="iv-data-item">
                                                <div class="iv-data-item-bx iv-data-item-bx-1">
                                                    <div class="text-center">
                                                        <div class="iv-data-item-attr">
                                                            <strong class="fs24" id="totalFinish" >0</strong>
                                                        </div>
                                                        <h3>
                                                            <span class="fs14 c-ccc hand"
                                                                  data-container="body"
                                                                  data-html="true"
                                                                  data-toggle="popover"
                                                                  data-trigger="hover"
                                                                  data-placement="top"
                                                                  data-content="截止昨日，学完该课程的人数总和，每24小时更新">
                                                                <i class="fa fa-exclamation-circle"></i>
                                                            </span>
                                                            <span class="fs14" >总完成人数(人)</span>
                                                        </h3>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="iv-data-item">
                                                <div class="iv-data-item-bx iv-data-item-bx-1">
                                                    <div class="text-center">
                                                        <div class="iv-data-item-attr">
                                                            <strong class="fs24" id="finishRate" >0</strong>
                                                            <span class="fs12" >%</span>
                                                        </div>
                                                        <h3>
                                                            <span class="fs14 c-ccc hand"
                                                                  data-container="body"
                                                                  data-html="true"
                                                                  data-toggle="popover"
                                                                  data-trigger="hover"
                                                                  data-placement="top"
                                                                  data-content="截止昨日，学完该课程的人数 / 学习该课程的人数，每24小时更新">
                                                                <i class="fa fa-exclamation-circle"></i>
                                                            </span>
                                                            <span class="fs14">累计完课率</span>
                                                        </h3>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </section>
                                </div>
                                <hr>
                                <div class="m-t-lg">
                                    <section class="clearfix">
                                        <aside class="pull-left">
                                            <span class="fs14 c-000 vam">|</span>
                                            <span class="fs16 c-000 vam ml5">学习走势图</span>
                                            <span class="fs14 c-ccc hand vam"
                                                  data-container="body"
                                                  data-html="true"
                                                  data-toggle="popover"
                                                  data-trigger="hover"
                                                  data-placement="top"
                                                  data-content="统计周期：课程创建日期至昨日">
                                                                <i class="fa fa-exclamation-circle"></i>
                                                            </span>
                                        </aside>
                                        <aside class="pull-right stat-time-filter__wrap">
                                            <section class="form-inline ">
                                                <section class="form-group">
                                                    <span class="fs14 c-999">时间筛选：</span>
                                                    <select class="form-control" id="form-time-type">
                                                        <option value="2" selected="selected">近7天</option>
                                                        <option value="3">近30天</option>
                                                        <option value="4">自定义</option>
                                                    </select>
                                                    <section class="checkbox ml10 hide time-box">
                                                        <span class="fs14 c-333">2018-12-05</span>
                                                        <span class="fs14 c-999"> 至 </span>
                                                        <span class="fs14 c-333">2018-12-11</span>
                                                    </section>
                                                    <section class="checkbox m-r hide time-input-box">
                                                        <input placeholder="开始时间"
                                                               id="formStatTimeLaydate"
                                                               name="statTimeLaydate"
                                                               class="laydate-icon form-control layer-date" type="text"/>
                                                        <div class="checkbox"><span class="fs12 c-999">至</span></div>
                                                        <input placeholder="结束时间"
                                                               id="formEndTimeLaydate"
                                                               name="endTimeLaydate"
                                                               class="laydate-icon form-control layer-date" type="text"/>
                                                    </section>
                                                </section>
                                            </section>
                                        </aside>
                                    </section>
                                    <section class="m-t">
<!--                                        此处为拆线图表展示：X轴为：时间；Y轴为：学习人数 和 平均学习时长（分钟）-->
                                        <div id="study-box" class="stat-data__box">
                                            <div class="stat-loading_wrap hide" id="trade-loading-box">
                                                <svg width="120" height="120" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid" class="lds-rolling"><circle cx="50" cy="50" fill="none" ng-attr-stroke="{{config.color}}" ng-attr-stroke-width="{{config.width}}" ng-attr-r="{{config.radius}}" ng-attr-stroke-dasharray="{{config.dasharray}}" stroke="#4487f8" stroke-width="2" r="24" stroke-dasharray="113.09733552923255 39.69911184307752"><animateTransform attributeName="transform" type="rotate" calcMode="linear" values="0 50 50;360 50 50" keyTimes="0;1" dur="1s" begin="0s" repeatCount="indefinite"></animateTransform></circle></svg>
                                            </div>
                                        </div>
                                    </section>
                                </div>

                                <div class="m-t-lg m-b-lg">
                                    <section class="clearfix">
                                        <aside class="pull-left">
                                            <span class="fs14 c-000 vam">|</span>
                                            <span class="fs16 c-000 vam ml5">完课率走势图</span>
                                            <span class="fs14 c-ccc hand vam"
                                                  data-container="body"
                                                  data-html="true"
                                                  data-toggle="popover"
                                                  data-trigger="hover"
                                                  data-placement="top"
                                                  data-content="统计周期：课程创建日期至昨日<br>完课率 = 学完该课程人数 / 学习该课程人数">
                                                                <i class="fa fa-exclamation-circle"></i>
                                                            </span>
                                        </aside>
                                        <aside class="pull-right stat-time-filter__wrap">
                                            <section class="form-inline">
                                                <section class="form-group">
                                                    <span class="fs14 c-999">时间筛选：</span>
                                                    <select class="form-control" id="finish-time-type">
                                                        <option value="2" selected="selected">近7天</option>
                                                        <option value="3">近30天</option>
                                                        <option value="4">自定义</option>
                                                    </select>
                                                    <section class="checkbox ml10 hide time-box">
                                                        <span class="fs14 c-333">2018-12-05</span>
                                                        <span class="fs14 c-999"> 至 </span>
                                                        <span class="fs14 c-333">2018-12-11</span>
                                                    </section>
                                                    <section class="checkbox m-r hide time-input-box">
                                                        <input placeholder="开始时间"
                                                               id="finishStatTimeLaydate"
                                                               name="statTimeLaydate"
                                                               class="laydate-icon form-control layer-date" type="text"/>
                                                        <div class="checkbox"><span class="fs12 c-999">至</span></div>
                                                        <input placeholder="结束时间"
                                                               id="finishEndTimeLaydate"
                                                               name="endTimeLaydate"
                                                               class="laydate-icon form-control layer-date" type="text"/>
                                                    </section>
                                                </section>
                                            </section>
                                        </aside>
                                    </section>
                                    <section class="m-t" >
<!--                                        此处为拆线图表展示：X轴为：时间；Y轴为：学完人数 和 完课率-->
                                        <div id="finish-box" class="stat-data__box">
                                            <div class="stat-loading_wrap hide" id="finish-loading-box">
                                                <svg width="120" height="120" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid" class="lds-rolling"><circle cx="50" cy="50" fill="none" ng-attr-stroke="{{config.color}}" ng-attr-stroke-width="{{config.width}}" ng-attr-r="{{config.radius}}" ng-attr-stroke-dasharray="{{config.dasharray}}" stroke="#4487f8" stroke-width="2" r="24" stroke-dasharray="113.09733552923255 39.69911184307752"><animateTransform attributeName="transform" type="rotate" calcMode="linear" values="0 50 50;360 50 50" keyTimes="0;1" dur="1s" begin="0s" repeatCount="indefinite"></animateTransform></circle></svg>
                                            </div>
                                        </div>
                                    </section>
                                </div>

                            </div>
                        </div>
                        <div class="tab-pane" id="tab-2">
                            <div class="panel-body">
                                <div class="pt10">
                                    <div class="row">
                                        <div class="col-sm-12">
                                            <div class="pt10 text-left  col-sm-4">
                                                <a class="coursePlayRecordSubmit">
                                                    <span>
                                                        <button class="btn btn-white" data-toggle="tooltip" data-placement="top" title="" data-original-title="刷新学习记录列表">
                                                            <i class="fa fa-refresh"></i> 刷新
                                                        </button>
                                                    </span>
                                                </a>
                                            </div>
                                            <div class="pt10 text-right col-sm-8">

                                                <form id="courseForm" role="form" name="courseId" class="form-inline">
                                                    <div class="form-group" style="margin-bottom: 10px">
                                                        <input type="hidden" id="courseId" name="courseId" th:value="${courseInfo['id']}">
                                                        <input type="hidden"  name="setCreator" value="true">
                                                        <input placeholder="请输入观看时间开始" id="lookCourseDate"  name="toTime" class="laydate-icon form-control layer-date" type="text">
                                                        <input placeholder="请输入观看时间结束" id="lookToCourseDate"  name="endTime" class="laydate-icon form-control layer-date" type="text">
                                                    </div>
                                                    <button class="btn btn-w-m btn-primary coursePlayRecordSubmit"   type="button" style="margin-bottom: 10px">搜索</button>
                                                </form>
                                            </div>
                                        </div>
                                    </div>
                                    <div  id="course_play_record_list">
                                        此处 表格数据展示，与学员管理 学习记录数据表格 一致
                                        （最新学习时间、最新学习来源、学习章节、章节资源类型、总学习时长、学习次数，操作）
                                    </div>
                                </div>
                        </div>
                    </div>
                </div>
                <!--直播课程数据-->
        </div>
                <div class="tabs-container " th:if="(${courseInfo['courseTypeKey']} eq 'LIVE') or ${courseInfo['courseTypeKey']} eq 'SMALL'">
                    <ul class="nav nav-tabs wNav-tabs">
                        <li class="active"><a class="fs14" data-toggle="tab" href="#tab-3" aria-expanded="true"> 学习数据</a></li>
                        <li><a class="fs14 liveListBtn" data-toggle="tab" href="#tab-4" aria-expanded="true"> 学员详情</a></li>
                        <!--                        <li><a class="fs14" data-toggle="tab" href="#tab-5" aria-expanded="true"> 通知设置</a></li>-->
                    </ul>
                    <div class="tab-content">
                        <div class="tab-pane active" id="tab-3">
                            <div class="panel-body">
                                <div class="stat-loading_wrap hide" id="catalog-loading-box">
                                    <svg width="120" height="120" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid" class="lds-rolling"><circle cx="50" cy="50" fill="none" ng-attr-stroke="{{config.color}}" ng-attr-stroke-width="{{config.width}}" ng-attr-r="{{config.radius}}" ng-attr-stroke-dasharray="{{config.dasharray}}" stroke="#4487f8" stroke-width="2" r="24" stroke-dasharray="113.09733552923255 39.69911184307752"><animateTransform attributeName="transform" type="rotate" calcMode="linear" values="0 50 50;360 50 50" keyTimes="0;1" dur="1s" begin="0s" repeatCount="indefinite"></animateTransform></circle></svg>
                                </div>
                                <div class="m-t text-center">
                                    <button type="button" class="btn btn-outline btn-primary btn-lg" id="catalogBox">
                                        <span class="vam" id="catalogName">全部直播目录</span>
                                        <span class="caret vam m-l-lg"></span>
                                    </button>
                                    <button type="button" class="btn btn-outline btn-primary btn-lg" id="allCatalog">
                                        <span class="vam" >全部直播目录</span>
                                    </button>
                                </div>
                                <div class="m-t-lg">
                                    <section class="clearfix">
                                        <aside class="pull-left">
                                            <span class="fs14 c-000 vam">|</span>
                                            <span class="fs16 c-000 vam ml5">直播概况</span>
                                        </aside>
                                    </section>
                                    <section class="m-t m-l-lg m-r-lg">
                                        <div class="row in-iv-data-wrap in-iv-data-box">
                                            <div class="iv-data-item">
                                                <div class="iv-data-item-bx iv-data-item-bx-1">
                                                    <div class="text-center">
                                                        <div class="iv-data-item-attr">
                                                            <strong class="fs24" id="totalOnlineUser">3</strong>
                                                        </div>
                                                        <h3>
                                                            <span class="fs14 c-ccc hand"
                                                                  data-container="body"
                                                                  data-html="true"
                                                                  data-toggle="popover"
                                                                  data-trigger="hover"
                                                                  data-placement="top"
                                                                  data-content="直播课创建截止今日，全部直播间进入的学员总数" data-original-title="" title="">
                                                                <i class="fa fa-exclamation-circle"></i>
                                                            </span>
                                                            <span class="fs14">累计在线人数(人)</span>
                                                        </h3>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="iv-data-item">
                                                <div class="iv-data-item-bx iv-data-item-bx-1">
                                                    <div class="text-center">
                                                        <div class="iv-data-item-attr">
                                                            <strong class="fs24" id="averageDuration">10</strong>
                                                        </div>
                                                        <h3>
                                                            <span class="fs14 c-ccc hand"
                                                                  data-container="body"
                                                                  data-html="true"
                                                                  data-toggle="popover"
                                                                  data-trigger="hover"
                                                                  data-placement="top"
                                                                  data-content="所有学员在线总时长 / 累计在线人数 <br />在线时长：直播创建至今学员进入直播间停留时间">
                                                                <i class="fa fa-exclamation-circle"></i>
                                                            </span>
                                                            <span class="fs14">人均在线时长(分钟)</span>
                                                        </h3>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="iv-data-item">
                                                <div class="iv-data-item-bx iv-data-item-bx-1">
                                                    <div class="text-center">
                                                        <div class="iv-data-item-attr">
                                                            <strong class="fs24" id="liveTotalCount">3</strong>
                                                        </div>
                                                        <h3>
                                                            <span class="fs14 c-ccc hand"
                                                                  data-container="body"
                                                                  data-html="true"
                                                                  data-toggle="popover"
                                                                  data-trigger="hover"
                                                                  data-placement="top"
                                                                  data-content="截止昨日，直播时和结束后进入直播间的学员数，每24小时更新">
                                                                <i class="fa fa-exclamation-circle"></i>
                                                            </span>
                                                            <span class="fs14">总学习人数</span>
                                                        </h3>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="iv-data-item">
                                                <div class="iv-data-item-bx iv-data-item-bx-1">
                                                    <div class="text-center">
                                                        <div class="iv-data-item-attr">
                                                            <strong class="fs24" id="average">100</strong>
                                                        </div>
                                                        <h3>
                                                            <span class="fs14 c-ccc hand"
                                                                  data-container="body"
                                                                  data-html="true"
                                                                  data-toggle="popover"
                                                                  data-trigger="hover"
                                                                  data-placement="top"
                                                                  data-content="截止昨日，所有学员学习总时长 / 总学习人数，每24小时更新">
                                                                <i class="fa fa-exclamation-circle"></i>
                                                            </span>
                                                            <span class="fs14">人均学习时长(分钟)</span>
                                                        </h3>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="iv-data-item">
                                                <div class="iv-data-item-bx iv-data-item-bx-1">
                                                    <div class="text-center">
                                                        <div class="iv-data-item-attr">
                                                            <strong class="fs24" >
                                                                <span id="mobileStudyCount"></span>/
                                                                <span id="pcStudyCount"></span>
                                                            </strong>
                                                        </div>
                                                        <h3>
                                                            <span class="fs14 c-ccc hand"
                                                                  data-container="body"
                                                                  data-html="true"
                                                                  data-toggle="popover"
                                                                  data-trigger="hover"
                                                                  data-placement="top"
                                                                  data-content="截止昨日，所有PC端进入直播间学习人数 / 所有Mobile端(Android、iOS、H5)进入直播间学习人数，每24小时更新">
                                                                <i class="fa fa-exclamation-circle"></i>
                                                            </span>
                                                            <span class="fs14">PC / Mobile学习人数</span>
                                                        </h3>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="iv-data-item">
                                                <div class="iv-data-item-bx iv-data-item-bx-1">
                                                    <div class="text-center">
                                                        <div class="iv-data-item-attr">
                                                            <strong class="fs24" id="userMsgCount">5986</strong>
                                                        </div>
                                                        <h3>
                                                            <span class="fs14 c-ccc hand"
                                                                  data-container="body"
                                                                  data-html="true"
                                                                  data-toggle="popover"
                                                                  data-trigger="hover"
                                                                  data-placement="top"
                                                                  data-content="截止昨日，所有直播间聊天总量，每24小时更新">
                                                                <i class="fa fa-exclamation-circle"></i>
                                                            </span>
                                                            <span class="fs14">累计聊天总量</span>
                                                        </h3>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </section>
                                </div>
                                <hr>
                                <div class="m-t-lg">
                                    <section class="clearfix">
                                        <aside class="pull-left">
                                            <span class="fs14 c-000 vam">|</span>
                                            <span class="fs16 c-000 vam ml5">直播在线人数</span>
                                            <span class="fs14 c-ccc hand vam"
                                                  data-container="body"
                                                  data-html="true"
                                                  data-toggle="popover"
                                                  data-trigger="hover"
                                                  data-placement="top"
                                                  data-content="统计周期：从直播开始时间的前后一周数据">
                                                                <i class="fa fa-exclamation-circle"></i>
                                                            </span>
                                        </aside>
                                        <aside class="pull-right stat-time-filter__wrap">
                                            <section class="form-inline">
                                                <section class="form-group">
                                                    <span class="fs14 c-999">时间筛选：</span>
                                                    <select class="form-control" id="live-time-type">
                                                        <option value="2" selected="selected">近7天</option>
                                                        <option value="3">近30天</option>
                                                        <option value="4">自定义</option>
                                                    </select>
                                                    <section class="checkbox ml10 hide time-box">
                                                        <span class="fs14 c-333">2018-12-05</span>
                                                        <span class="fs14 c-999"> 至 </span>
                                                        <span class="fs14 c-333">2018-12-11</span>
                                                    </section>
                                                    <section class="checkbox m-r hide time-input-box">
                                                        <input placeholder="开始时间"
                                                               id="liveStatTimeLaydate"
                                                               name="statTimeLaydate"
                                                               class="laydate-icon form-control layer-date" type="text"/>
                                                        <div class="checkbox"><span class="fs12 c-999">至</span></div>
                                                        <input placeholder="结束时间"
                                                               id="liveEndTimeLaydate"
                                                               name="endTimeLaydate"
                                                               class="laydate-icon form-control layer-date" type="text"/>
                                                    </section>
                                                </section>
                                            </section>
                                        </aside>
                                    </section>
                                    <section class="m-t">
                                        <div id="live_box" class="stat-data__box">
                                            <div class="stat-loading_wrap hide" id="live-loading-box">
                                                <svg width="120" height="120" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid" class="lds-rolling"><circle cx="50" cy="50" fill="none" ng-attr-stroke="{{config.color}}" ng-attr-stroke-width="{{config.width}}" ng-attr-r="{{config.radius}}" ng-attr-stroke-dasharray="{{config.dasharray}}" stroke="#4487f8" stroke-width="2" r="24" stroke-dasharray="113.09733552923255 39.69911184307752"><animateTransform attributeName="transform" type="rotate" calcMode="linear" values="0 50 50;360 50 50" keyTimes="0;1" dur="1s" begin="0s" repeatCount="indefinite"></animateTransform></circle></svg>
                                            </div>
                                        </div>
                                        <!--                                        此处为拆线图表展示：X轴为：时间；Y轴为：人数-->
                                    </section>
                                </div>
                                <div hidden  id="statisBox">
                                    <ul class="nav nav-tabs wNav-tabs">
                                        <li class="active"><a class="fs14 interactiveList" data-toggle="tab" href="#tab-7" aria-expanded="true"> 直播互动</a></li>
                                        <li><a class="fs14 chatmsgList" data-toggle="tab" href="#tab-8" aria-expanded="true"> 聊天记录</a></li>
                                        <li><a class="fs14 rollcallList" data-toggle="tab" href="#tab-9" aria-expanded="true"> 学员签到</a></li>
                                    </ul>
                                    <div class="tab-content">
                                        <div id="tab-7" class="tab-pane active">
                                            <section class="clearfix">
                                                <aside class="pull-right stat-time-filter__wrap">
                                                    <section class="form-inline">
                                                        <section class="form-group">
                                                            <button type="button" id="downloadInteractiveList"  class="btn btn-default">互动数据导出</button>
                                                        </section>
                                                    </section>
                                                </aside>
                                            </section>
                                            <section class="m-t">
                                                <!--                                            此处为 调用 CC 获取直播互动的统计信息 接口 ：http://api.csslcloud.net/api/statis/interactive-->
                                                <div id="interactiveList"></div>
                                            </section>
                                        </div>

                                        <div id="tab-8" class="tab-pane ">
                                            <section class="clearfix">
                                                <aside class="pull-right stat-time-filter__wrap">
                                                    <section class="form-inline">
                                                        <section class="form-group">
                                                            <button type="button" id="downloadChatMsgList" class="btn btn-default">聊天数据导出</button>
                                                        </section>
                                                    </section>
                                                </aside>
                                            </section>
                                            <section class="m-t">
                                                <!--                                            此处为 调用 CC 获取聊天信息 接口 ：http://api.csslcloud.net/api/live/chatmsg-->
                                                <div id="chatmsgList"></div>
                                            </section>
                                        </div>

                                        <div id="tab-9" class="tab-pane ">
                                            <section class="clearfix">
                                                <aside class="pull-right stat-time-filter__wrap">
                                                    <section class="form-inline">
                                                        <section class="form-group">
                                                            <button type="button" id="downloadRollCallList" class="btn btn-default">签到数据导出</button>
                                                        </section>
                                                    </section>
                                                </aside>
                                            </section>
                                            <section class="m-t">
                                                <!--                                            此处为 调用 CC 获取签到信息 接口 ：http://api.csslcloud.net/api/live/rollcall-->
                                                <div id="rollcallList"></div>
                                            </section>
                                        </div>
                                    </div>
                                </div>

                            </div>
                        </div>
                        <div class="tab-pane" id="tab-4">
                            <div class="panel-body">
                                <div class="pt10">
                                    <div class="row">
                                        <div class="col-sm-12">
                                            <div class="pt10 text-left  col-sm-4">
                                                <a class="coursePlayRecordSubmit">
                                                    <span>
                                                        <button class="btn btn-white" data-toggle="tooltip" data-placement="top" title="" data-original-title="刷新学习记录列表">
                                                            <i class="fa fa-refresh"></i> 刷新
                                                        </button>
                                                    </span>
                                                </a>
                                            </div>
                                            <div class="pt10 text-right col-sm-8">

                                                <form id="liveForm" role="form" class="form-inline">
                                                    <div class="form-group" style="margin-bottom: 10px">
                                                        <input type="hidden" id="courseId" name="courseId" th:value="${courseInfo['id']}">
                                                        <input type="hidden"  name="setCreator" value="true">
                                                        <input placeholder="请输入观看时间开始" id="lookLiveDate" name="toTime" class="laydate-icon form-control layer-date" type="text">
                                                        <input placeholder="请输入观看时间结束" id="lookToLiveDate" name="endTime" class="laydate-icon form-control layer-date" type="text">
                                                    </div>
                                                    <button class="btn btn-w-m btn-primary livePlayRecordSubmit"   type="button" style="margin-bottom: 10px">搜索</button>


                                                </form>
                                            </div>
                                        </div>
                                    </div>
                                    <div  id="live_play_record_list">
                                        此处 表格数据展示，与学员管理 学习记录数据表格 一致
                                        （最新学习时间、最新学习来源、学习章节、总学习时长、学习次数，操作）
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="tab-pane" id="tab-5">
                            <div class="panel-body">
                                <section class="m-t m-t-lg">
                                    <div class="form-horizontal">
                                        <div class="form-group">
                                            <label class="col-sm-2 control-label">短信直播通知</label>
                                            <div class="col-sm-6 switch mt5">
                                                <div class="clearfix">
                                                    <div class="pull-left">
                                                        <div class="onoffswitch">
                                                            <input name="" type="checkbox" class="onoffswitch-checkbox">
                                                            <label class="onoffswitch-label" for="">
                                                                <span class="onoffswitch-inner"></span>
                                                                <span class="onoffswitch-switch"></span>
                                                            </label>
                                                        </div>
                                                    </div>
                                                    <span class="fs12 c-999 m-l">开启后，将在开播前以短信形式发送提醒学员参加直播</span>
                                                </div>
                                                <div class="m-t-md">
                                                    <div class="clearfix">
                                                        <aside class="pull-left mt5">
                                                            <span>选择短信通知时间：</span>
                                                        </aside>
                                                        <aside class="pull-left m-l">
                                                            <select class="form-control" name="account">
                                                                <option>直播开始时</option>
                                                                <option>5分钟前</option>
                                                                <option>15分钟前</option>
                                                                <option>30分钟前</option>
                                                                <option>60分钟前</option>
                                                                <option>1天前</option>
                                                            </select>
                                                        </aside>
                                                    </div>
                                                    <div class="m-t">
                                                        <div class="alert alert-warning alert-dismissable">
                                                            短信数量为0时无法发送短信直播提醒，将直接忽略此步骤。
                                                            <br>
                                                            当前剩余短信：190条
                                                            <a href="">前往充值 <i class="fa fa-angle-right"></i></a>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </section>
                            </div>
                        </div>

                    </div>
                </div>

            </div>
    <div data-th-replace="layout/head-footer"></div>
    <script type="text/javascript" th:src="@{{path}/admin/libs/plugins/echarts/echarts.min.3.0.js?v={v}(path=${staticPath},v=${v})}"></script>
    <script type="text/javascript" th:src="@{{path}/admin/business/course/cou/courseTeachData/course_teach_data.js?v={v}(path=${staticPath},v=${v})}"></script>
    <script type="text/javascript" th:src="@{{path}/admin/libs/plugins/layer/laydate/laydate.js?v={v}(path=${staticPath},v=${v})}"></script>
    <script type="text/javascript" th:src="@{{path}/admin/business/statistics/time-utils.js?v={v}(path=${staticPath},v=${v})}"></script>
    <script th:inline="javascript" type="text/javascript">
        var courseType=[[${courseInfo['courseTypeKey']}]]
    </script>
</body>
</html>


